
<template>
    <el-row ref="viewerContainer" class="demo-viewer">
      <vc-viewer @ready="onViewerReady">
        <vc-collection-polyline @click="onClicked" ref="collectionRef" :polylines="polylines">
          <vc-polyline
            :positions="[[90, 20, 10000], [120, 20, 10000]]"
            :material="{
              fabric: {
                type: 'Color',
                uniforms: {
                  color: 'red'
                }
              }
            }"
            :width="5"
          ></vc-polyline>
          <vc-polyline  
            :positions="[[90, 30, 10000], [120, 30, 10000]]"
            :material="{
              fabric: {
                type: 'PolylineGlow',
                uniforms: {
                  color: 'blue'
                }
              }
            }"
            :width="10"
          ></vc-polyline>
          <vc-polyline
            :positions="[[90, 40, 10000], [120, 40, 10000]]"
            :material="{
              fabric: {
                type: 'PolylineArrow',
                uniforms: {
                  color: 'purple'
                }
              }
            }"
            :width="10"
          ></vc-polyline>
        </vc-collection-polyline>
      </vc-viewer>
      <el-row class="demo-toolbar">
        <el-button type="danger" round @click="unload">销毁</el-button>
        <el-button type="danger" round @click="load">加载</el-button>
        <el-button type="danger" round @click="reload">重载</el-button>
      </el-row>
    </el-row>
    </template>
    
    <script>
      import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue'
      export default {
        setup() {
          // state
          const collectionRef = ref(null)
          const polylines = ref([])
          const instance = getCurrentInstance()
          // methods
          const onClicked = e => {
            console.log(e)
          }
          const unload = () => {
            collectionRef.value.unload()
          }
          const reload = () => {
            collectionRef.value.reload()
          }
          const load = () => {
            collectionRef.value.load()
          }
          const onViewerReady = ({ Cesium, viewer }) => {
            for (var i = 0; i < 500; i++) {
              let polyline = {}
              let positions = []
              positions.push({ lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 })
              positions.push({ lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 })
              polyline.positions = positions
              polyline.material = '#' + Math.random().toString(16).substr(2, 6).toUpperCase()
              polylines.value.push(polyline)
            }
          }
    
          return {
            unload,
            reload,
            load,
            onClicked,
            onViewerReady,
            collectionRef,
            polylines
          }
        }
      }
    </script>
    
    <style>
    
    </style>
    